<template>
  <el-row :gutter="20" class="report-review-container">
    
    <el-col :span="16" class="report-display">
      <el-scrollbar style="height: 76vh; border: 1px solid #dcdfe6; padding: 10px;">
        <div v-html="reportContent" class="report-content" />
      </el-scrollbar>
    </el-col>
    <!-- 下面的代码使用html进行报告加载，不需要梯子 -->

<!-- <el-col :span="16" class="report-display">
      <iframe :src="'https://docs.google.com/gview?url=' + reportUrl + '&embedded=true'" style="width:100%; height:78vh;" frameborder="0"></iframe>
    </el-col> -->
     
    <el-col :span="8" class="annotations-section">
      <el-card class="annotations-card">
        <h3>批注</h3>
        <!-- 批注输入框 -->
        <el-input
          v-model="annotationText"
          type="textarea"
          placeholder="请输入批注内容"
          :autosize="{ minRows: 20, maxRows: 20 }"
          class="annotation-input"
        />
        <!-- 保存批注按钮 和 单选框 -->
        <el-row>
          <!-- 保存批注按钮 -->
          <el-col :span="12">
            <el-button @click="saveAnnotation" type="primary" class="save-button">保存</el-button>
          </el-col>

          <!-- 状态单选框 -->
          <el-col :span="12" class="status-radio-group">
            <el-radio-group v-model="status" class="status-radio-group">
              <el-radio label="已通过">通过</el-radio>
              <el-radio label="未通过">未通过</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>

        <!-- 提交审核结果按钮 -->
        <el-button @click="submitReview" type="success" class="submit-button">提交审核结果</el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue';
import { ReportReviewDetailService } from '../api/ReportReviewDetail';
import { ElNotification } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { Annotation } from '../model/Annotation';
import mammoth from 'mammoth';

let annotation = reactive<Annotation>({
  id: 1,
  annotationId: 0,
  reportId: 123,
  reviewer: 'reviewer:9733',
  text: 'This is a comment',
  status: '未完成',
});

export default defineComponent({
  name: 'ReportReview',
  setup() {
    const route = useRoute(); // 获取当前的路由对象
    const reportUrl = ref<string>(''); 
    const annotationText = ref('');
    const status = ref<string>('已通过'); // 设置默认选择项为 "通过"
    const router = useRouter();
    const reportContent = ref<string>(''); // 用于存储转换后的 HTML 内容
    
    // 处理 reportId，确保它是一个数字
    const reportId = ref<number>(-1); // 默认值为 -1
    
    // 确保获取到 reportId 并进行类型转换
    onMounted(async () => {
      const id = route.params.reportId;
      console.log(id);
      // 检查 route.params.reportId 是否有效并转换为 number
      if (id && !isNaN(Number(id))) {
        reportId.value = Number(id); // 确保 reportId 是数字类型
        // 加载报告 URL
        await getReportUrlById(reportId.value);
        loadWordFile();
        getAnnotationByReportId(reportId.value);
      } else {
        console.error('无效的 reportId');
      }
    });

    const loadWordFile = async () => {
      try {
        // 通过 fetch 获取文件内容
        const fileResponse = await fetch(reportUrl.value);
        const arrayBuffer = await fileResponse.arrayBuffer();

        // 使用 mammoth 将 Word 转换为 HTML
        mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
          .then((result) => {
            reportContent.value = result.value; // 保存转换后的 HTML 内容
          })
          .catch((error) => {
            console.error('无法加载 Word 文件', error);
          });
      } catch (error) {
        console.error('获取报告失败', error);
      }
    };

    // 保存批注
    const saveAnnotation = async () => {
      try {
        annotation.annotationId = 0; // 这里假设 annotationId 是默认值 0
        annotation.text = annotationText.value;
        annotation.reportId = reportId.value;
        await ReportReviewDetailService.saveAnnotation(annotation);
        ElNotification({
          title: '当前批注已成功保存',
          message: '未提交审核结果前可继续编辑此批注',
          type: 'success',
        });
      } catch (error) {
        ElNotification({
          title: '当前批注保存失败',
          message: '请联系管理员解决',
          type: 'error',
        });
      }
    };

    // 获取报告Url
    const getReportUrlById = async (id: number) => {
      try {
        const response = await ReportReviewDetailService.getReportUrlById(id);
        reportUrl.value = response.data; 
        console.log(reportUrl.value);
      } catch (error) {
        console.error('获取报告失败', error);
      }
    };

    // 根据 reportId 获取批注数据
    const getAnnotationByReportId = async (id: number) => {
      try {
        const response = await ReportReviewDetailService.getAnnotationByReportId(id);
        annotationText.value = response.data.text;
        annotation = response.data;  // 假设annotation是你想赋值的变量
        console.log('批注数据:', annotation);
      } catch (error) {
        console.log("没有加载批注");
      }
    };

    const goToReportReviewPage = () => {
      router.push({ name: 'ReportReview' });
    };

    // 提交审核
    const submitReview = async () => {
      try {
        const response = await ReportReviewDetailService.submitReview(reportId.value, annotationText.value, status.value);
        // 根据审核状态显示不同的通知
        if (status.value === '已通过') {
          ElNotification({
            title: '报告审核结果提交成功',
            message: '报告已通过审核',
            type: 'success',
          });
        } else {
          ElNotification({
            title: '报告审核结果提交成功',
            message: '报告未通过审核，需要修改后再次审核',
            type: 'success',
          });
        }
        goToReportReviewPage();
      } catch (error) {
        ElNotification({
          title: '报告审核结果提交失败',
          message: '请联系管理员解决。',
          type: 'error',
        });
      }
    };

    return {
      reportUrl,
      annotationText,
      status,
      saveAnnotation,
      submitReview,
      reportContent
    };
  },
});
</script>




<style scoped>

.report-review-container {
  padding: 20px;
  height: 85vh; /* 设置容器高度为视口高度 */
  overflow: hidden; /* 禁用整体容器的滚动条 */
  box-sizing: border-box; /* 确保 padding 被包括在高度计算内 */
}

.report-display .report-iframe {
  width: 100%;
  height: 90vh;
  border: none; /* 移除 iframe 的边框 */
}

.annotations-section {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置为视口高度 */
  overflow: hidden; /* 禁用右侧区域的滚动条 */
}

.annotations-card {
  height: 78vh;
  overflow: hidden; /* 禁用卡片内的滚动条 */
}

.annotation-input {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden; /* 禁用输入框的滚动条 */
}

.save-button {
  width: 100px;
  margin-top: auto;
}

.submit-button{
  margin-top: 20px;
}

.status-radio-group {
  margin-top: auto;
  display: flex;
  justify-content: flex-end; /* 将单选框放在右侧 */
}

</style>
